iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

Fabricjs 筆記系列 第 8

Day 8 - Fabricjs 事件

  • 分享至 

  • xImage
  •  

Fabricjs 還有一個很厲害的地方,他提供了相當完整個事件系統,我們想要監聽某個動作,就只需要像是 JQuery 那樣使用 on 來監聽事件,使用 off 來取消監聽事件。

Fabricjs 提供了良好的事件 Api,透過事件驅動的方式,讓我們能夠監聽使用者所做的一些操作,從對使用者滑鼠監聽,或是物件的改變都是沒有問題的。

可以監聽哪些事件

  • 使用者滑鼠操作
  • 物件狀態被改變時

使用者滑鼠事件

mouse:down

只要使用者對 canvas 做了滑鼠點擊,就會發生的事件。

// 監聽點擊事件
canvas.on('mouse:down', (e) => {
  console.log(e)
})


點擊 canvas 後,可以看到這邊開發人員工具的 console 找到一些資訊,我們得到了回傳事件,讓我們稍微看看裡面的東西。

pointer 座標位置

滑鼠點擊時的座標,回傳一個 fabric.Pointer,裡頭裝著 x , y 座標

target 目標物件

使用者點擊時,所選中的物件就是 target,若無選中就會是 null。

只要拿到 target,我們就可以對使用者所要選擇的物件做修改。

以下是有點擊到東西時 target 的資料

  • 使用 target.type 能夠輕鬆取得目前被點選的物件型態
target.type // 取得目前新增物件的型態 (rect || circle || image)

這邊簡單示範點擊物件後,更改物件的顏色

// 點擊事件
let colorToggle = false
canvas.on('mouse:down', e => {
  console.log(e)
  const active = e.target
  if (active) {
    active.set({ fill: colorToggle ? 'red' : 'blue' })
    colorToggle = !colorToggle
    canvas.renderAll()
  }
})

轉變物件 (transform)

記錄了你對點擊到 object 所做的事情,
像是移動物件時 action: drag,這邊記錄了原始的 object 狀態
對他縮放就是 action: scale

這邊記錄了原始的 scale 值
並且也提供了 target 物件資訊 (記錄改變後的值)

其他使用者事件

Fabricjs 還提供了很多使用者操作的事件綁定。
用法其實都和上面提到的差不多,這邊就列出他們不詳細在解說了。

  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:down:before
  • mouse:move:before
  • mouse:up:before
  • mouse:over
  • mouse:out
  • mouse:dblclick
  • event:dragover
  • event:dragenter
  • event:dragleave
  • event:drop

可配合 drag & drop 來把東西丟進 canvas 中,這個我們之後在來實作。

整體物件的事件綁定

我們會想監聽所有在 canvas 底下的物件所發生的任何事情。

像是被使用者移動、縮放、新增、刪除等動作。

這些我們都可以透過 canvas.on 來監聽所有在canvas 之下的物件。

  • object:modified 當物件被更改時後
  • object:rotated 當物件被旋轉後
  • object:scaled 當物件被縮放後
  • object:moved 當物件被移動後
  • object:skewed 當物件被調整歪斜度後
  • object:rotating 當物件被旋轉時
  • object:scaling 當物件被縮放時
  • object:moving 當物件被移動時
  • object:skewing 當物件被調整歪斜度時
    動作後面加上 ed 的就是等使用者滑鼠放開後,才會發生的動作
    而後面加上 ing 的則是使用者在操作時就會發生的事件

下面舉些例子

object:modified

當我們對物件有所操控就會觸發這個事件,不論是縮放、旋轉、移動
可得到 target 物件以及 transform 物件

  • target 被操控的物件
  • transform 紀錄對他做了什麼事情
canvas.on('object:modified', e => {
  console.log(e)
})

object:moving

當物件被移動當下就會觸發事件
也可以得到當前的 target 狀態

let countMove = 0
canvas.on('object:moving', e => {
  console.log(e.target.type + countMove)
  countMove++
})

個別物件的事件綁定

如果今天我們不想對所有物件做綁定的話,也可以把事件綁定在單個物件上呦!

selected

當該物件被選擇時觸發事件

rect.on('selected', e => {
  console.log('HI!')
})

我們一樣可以對其他形狀的物件來傾聽他們的動作,如 modifiedmoving 之類的事件。

這邊還有太多的事件沒辦法一一的做示範
提供 fabricjs 官網的事件範例給大家參考
Fabric demo Event inspector: http://fabricjs.com/events

本日小結

  • canvas 監聽使用者的動作 (mouse event)
  • canvas 監聽所有物件動作 (object:modified)
  • 監聽個別物件

本日 codepen


上一篇
Day 7 - 文字效果
下一篇
Day 9 - Fabricjs 動畫
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言